<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      #ul1 {
        width: 366px;
        height: 366px;
        border: 1px solid black;
        margin: 100px auto;
        position: relative;
      }
      #ul1 li {
        width: 100px;
        height: 100px;
        float: left;
        margin: 10px;
        border: 1px solid black;
        list-style: none;
      }
      #ul1 li img {
        width: 100%;
        height: 100%;
      }
    </style>
    <script>
      window.onload = function () {
        var oUl1 = document.getElementById("ul1");
        var oLis = oUl1.getElementsByTagName("li");

        var curIndex = 2;
        for (let i = 0; i < oLis.length; i++) {
          oLis[i].style.left = oLis[i].offsetLeft + "px";
          oLis[i].style.top = oLis[i].offsetTop + "px";
          var oImg = document.createElement("img");
          oImg.src = `img/img${i + 1}.jpg`;
          oLis[i].appendChild(oImg);
        }
        for (let i = 0; i < oLis.length; i++) {
          oLis[i].style.position = "absolute";
          oLis[i].style.margin = "0px";

          oLis[i].onmouseover = function () {
            this.style.zIndex = curIndex++;
            cssStyle(this, {
              width: 200,
              height: 200,
              marginTop: -50,
              marginLeft: -50,
            });
          };
          oLis[i].onmouseout = function () {
            cssStyle(this, {
              width: 100,
              height: 100,
              marginTop: 0,
              marginLeft: 0,
            });
          };
        }
      };
      function cssStyle(node, cssObj, complete) {
        clearInterval(node.timer);
        node.timer = setInterval(function () {
          var isEnd = true;
          for (var attr in cssObj) {
            var iTarget = cssObj[attr];
            var iCur = parseInt(getStyle(node, attr));
            var speed = (iTarget - iCur) / 8;
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

            node.style[attr] = speed + iCur + "px";

            if (iCur != iTarget) {
              isEnd = false;
            }
          }
          if (isEnd) {
            if (complete) {
              complete.call(node);
            }
          }
        }, 10);
      }
      //跨浏览器兼容
      function getStyle(node, cssStyle) {
        return node.currentStyle
          ? node.currentStyle[cssStyle]
          : getComputedStyle(node)[cssStyle];
      }
    </script>
  </head>
  <body>
    <ul id="ul1">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </body>
</html>
